<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
    <title>Title</title>

<%--    <style>
        table,tr,td{
            border: 1px red solid;
            border-collapse: collapse;
        }
    </style>--%>
</head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script>
  function to_page(page){
      //获取total总页数的值
      var total = ${total};
      if(page<=1){
        page = 1;
      }else if(page>=total){
        if(total==0){
            total=1;
        }
        page = total;
      }
      //把形参的page值赋给form表单中隐藏的pageNum
      $("#pageNum").val(page);
    //表单提交(搜索功能)
      $("#form1").submit();
  }


</script>
<body>
<%--搜索框--%>
<form action="/productList.do" method="post" id="form1">
    手机名称: <input type="text" name="name" value="${name}">

    是否热卖:
    <input type="radio" name="isHot" value="2" checked>全部
    <input type="radio" name="isHot" value="1"
            <c:if test="${isHot==1}">
                checked
            </c:if>
    />是
    <input type="radio" name="isHot" value="0"
            <c:if test="${isHot==0}">
                checked
            </c:if>
    />否

    品牌:
    <select name="typeId">
        <option value="-1">全部</option>
        <%--获得tyeps表的数据展示--%>
        <c:forEach items="${types}" var="type">
            <option value="${type.tid}"
                <%--type表的主键tid等于product的外键typeid--%>
                    <c:if test="${type.tid==typeId}">
                        selected
                    </c:if>
            >${type.tname}
            </option>
        </c:forEach>
    </select>
    <%--搜索按钮(提交)--%>
    <input type="submit" value="搜索" class="btn btn-info btn-xs">
    <%--隐藏域pageNum--%>
    <input type="hidden" value="${pageNum}" name="pageNum" id="pageNum">
</form>


<%--表格显示数据--%>
<table class="table table-striped">
    <tr>
        <th>名称</th>
        <th>价格</th>
        <th>日期</th>
        <th>是否热卖</th>
        <th>商品描述</th>
        <th>品牌</th>
    </tr>
    <%--遍历集合数据--%>
    <c:forEach items="${products}" var="product">
        <tr>
            <td>${product.name}</td>
            <td>${product.price}</td>
            <td>
                <fmt:formatDate value="${product.date}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
            </td>
            <c:if test="${product.isHot==1}"><td>是</td></c:if>
            <c:if test="${product.isHot==0}"><td>否</td></c:if>
            <td>${product.description}</td>
            <td>${product.types.tname}</td>

        </tr>
    </c:forEach>

    <%--分页--%>
   <%-- <tr &lt;%&ndash;style="text-align: center" &ndash;%&gt;class="pagination pagination-lg">
        <td colspan="7">
            <a href="javascript:to_page(1)">首页</a>
            <a href="javascript:to_page(${pageNum-1})">上一页</a>
            <span>第${pageNum}页/共${total}页</span>
            <a href="javascript:to_page(${pageNum+1})">下一页</a>
            <a href="javascript:to_page(${total})">尾页</a>
        </td>
    </tr>--%>


</table>

<ul class="pagination pagination-sm" style="padding-left: 600px">
    <li><a href="javascript:to_page(1)">首页</a></li>
    <li><a href="javascript:to_page(${pageNum-1})">上一页</a></li>
    <li><span>第${pageNum}页/共${total}页</span></li>
    <li><a href="javascript:to_page(${pageNum+1})">下一页</a></li>
    <li><a href="javascript:to_page(${total})">尾页</a></li>
</ul>

</body>
</html>
